<template>
	<view class="container">
		<image :src="resultImg" mode="" style="width: 750rpx;height: 1624rpx;display: block;" :show-menu-by-longpress='true'></image>
		<view class="mask-tip" v-if="resultImg">
			<text>长按保存图片</text>
			<image class="icon" :src="dowonloadIcon" mode=""></image>
		</view>
		<image :src="back_scl_list" mode="" style="position: absolute;left: -6rpx;top: 485rpx;z-index: 999;width: 135rpx;height: 100rpx;" @click="backSclList()" v-if="resultImg"></image>
	</view>
</template>

<script>
	import {
		useDrawPoster
	} from '@/components/u-draw-poster'
	import {
		mapGetters
	} from 'vuex'
	export default {
		props: ['pageData'],
		data() {
			return {
				back_scl_list:this.imgBaseURL+'/scl/dongwulianai/back_scl_list.png',
				dowonloadIcon: this.imgBaseURL + '/scl/result/download-icon.png',
				defaultQrcode: this.imgBaseURL + '/scl/default_miniapp_qrcode_new.png',
				result_content_bg: this.imgBaseURL + '/scl/dongwulianai/result/result_content_bg.png',
				payed_result_bg: this.imgBaseURL + '/scl/dongwulianai/result/payed_result_bg_new.png',
				resultImg: ''
			}
		},
		mounted() {
			this.initCanvas();
		},
		computed: {
			...mapGetters('user', ['nickName', 'clientUserUid'])
		},
		methods: {
			async initCanvas() {
				let jumpUrl = 'p=2@id=' + this.pageData.sclId
				this.resultImg = await this.createChipCanvas(this.payed_result_bg, this.result_content_bg, jumpUrl);
			},
			/**
			 * 绘制海报
			 */
			async createChipCanvas(imgUrl, contentBg, jumpUrl) {
				console.log(imgUrl, contentBg, '-----------------imgUrl');
				const tmpScene = jumpUrl || 'r=5@id=' + this.clientUserUid
				const tmpPage = 'pages/index/index'
				let qrCode = this.defaultQrcode
				let imgD = ''
				const resSclInfo = await this.$u.api.getSclInfo({sclId:this.pageData.sclId})
				if(resSclInfo.data.data.url){
					qrCode = resSclInfo.data.data.url
				}else{
					const {
						data: dRes
					} = await this.$u.api.getQrcodeUrl({
						sceneStr: tmpScene,
						pageStr: tmpPage
					})
					
					if (dRes.success) {
						qrCode = dRes.data
					}
				}
				console.log(qrCode, '----------qrCode')

				try {
					// 创建绘制工具
					const dp = await useDrawPoster({
						selector: 'dcanvas',
						loading: {
							create:'结果报告生成中...'
						},
						debug: true,
						width: 750,
						height: 1624
					})
					const w = dp.canvas.width
					const h = dp.canvas.height

					console.log(dp.canvas, '-----------dp.canvas-------')

					dp.draw(async (ctx) => {
						console.log(ctx, '-----------ctx')
						// 绘制背景图
						await ctx.drawImage(imgUrl, 0, 0, w, h)
						this.drawWrapText(ctx, '@' + this.nickName, 60, 260, 600, '#FFFFFF', 60)
						//九宫格背景
						await ctx.drawImage(contentBg, 15, 629, 719, 703)

						// 小程序二维码
						await ctx.drawRoundImage(qrCode, 130, 1415, 138, 138,
							100)
						this.drawWrapText(ctx, this.pageData.resultList[0].resultTitle, 56, 763, 186,
							'#FFE6B0', 46)
						this.drawWrapText(ctx, this.pageData.resultList[1].resultTitle, 286, 763, 186,
							'#010301', 46)
						this.drawWrapText(ctx, this.pageData.resultList[2].resultTitle, 524, 763, 186,
							'#FFE6B0', 46)
						this.drawWrapText(ctx, this.pageData.resultList[3].resultTitle, 56, 1014, 186,
							'#010301', 46)
						this.drawWrapText(ctx, this.pageData.resultList[4].resultTitle, 524, 1014, 186,
							'#010301', 46)
						this.drawWrapText(ctx, this.pageData.resultList[5].resultTitle, 56, 1222, 186,
							'#FFE6B0', 46)
						this.drawWrapText(ctx, this.pageData.resultList[6].resultTitle, 286, 1222, 186,
							'#010301', 46)
						this.drawWrapText(ctx, this.pageData.resultList[7].resultTitle, 524, 1222, 186,
							'#FFE6B0', 46)

					})

					imgD = await dp.create()
				} catch (e) {
					console.log(e, '绘图')
				}
				console.log(imgD, '=========imgD')
				this.$emit('posterLoadingCom');
				return imgD || imgUrl
			},
			drawWrapText(ctx, text, x, y, maxWidth, color, fontSize) {
				ctx.font = `${fontSize}px Arial`;
				ctx.fillStyle = color;
				let lines = [];
				const lineHeight = 56;
				let currentLine = '';
				for (let i = 0; i < text.length; i++) {
					const char = text[i];
					const testLine = currentLine + char;
					const textWidth = this.getTextWidth(ctx, testLine);
					if (textWidth > maxWidth && currentLine !== '') {
						lines.push(currentLine);
						currentLine = char;
					} else {
						currentLine = testLine;
					}
				}
				lines.push(currentLine);
				for (let i = 0; i < lines.length; i++) {
					ctx.fillText(lines[i], x, y);
					y += lineHeight;
				}
			},
			getTextWidth(ctx, text) {
				const metrics = ctx.measureText(text);
				return metrics.width;
			}
			// drawWrapText(ctx, text, x, y, maxWidthInit, color, fontSizeInit) {
			// 	const maxWidth = maxWidthInit;
			// 	const fontSize = fontSizeInit;
			// 	const lines = this.wrapText(ctx, text, maxWidth, fontSize);
			// 	const lineHeight = 40;
			// 	ctx.fillStyle = color;
			// 	lines.forEach(line => {
			// 		ctx.fillText(line, x, y);
			// 		y += lineHeight;
			// 	});

			// },
			// wrapText(ctx, text, maxWidth, fontSize) {
			// 	const words = text.split(' ');
			// 	const lines = [];
			// 	let currentLine = '';
			// 	ctx.font = `${fontSize}px`;
			// 	words.forEach(word => {
			// 		const testLine = currentLine ? `${currentLine} ${word}` : word;
			// 		const metrics = ctx.measureText(testLine);

			// 		if (metrics.width <= maxWidth) {
			// 			currentLine = testLine;
			// 		} else {
			// 			lines.push(currentLine);
			// 			currentLine = word;
			// 		}
			// 	});
			// 	if (currentLine) {
			// 		lines.push(currentLine);
			// 	}

			// 	return lines;
			// }
		}
	}
</script>

<style lang="scss">
	.mask-tip {
		position: absolute;
		bottom: 250rpx;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 50rpx;
		background: linear-gradient(180deg, rgba(122, 106, 82, 0) 0%, rgba(15, 14, 20, 0.76) 30%, #0D0A11 100%);
		font-weight: bold;
		font-size: 29rpx;
		color: #FFFFFF;
		pointer-events: none;

		.icon {
			width: 32rpx;
			height: 32rpx;
		}
	}
</style>